<script setup>
import { computed, ref } from "vue";
import Panel from "../panel.vue"
import RecordTable from "./RecordTable.vue"
import { ElSelect } from "element-plus"

const props = defineProps({
    label: String,
    records: Array,
    filter: {
        type: Object,
        default: {
            method: "",
            status_code: "",
            error_type: ""
        }
    },
})
const emit = defineEmits(['select-client', 'select-record', "set-filter"])
const shownDetail = computed(() => {
    return props.records.slice((currentPage.value - 1) * countPerPage.value, currentPage.value * countPerPage.value);
});
const countPerPage = ref(50);
const currentPage = ref(1);
const filterEmpty = computed(() => {
    return props.filter.method == "" && props.filter.status_code == "" && props.filter.error_type == ""
})
const labelDeses = computed(() => {
    return Levels;
})

function goto(page) {
    currentPage.value = page;
}


function selectClient(client) {
    emit("select-client", client)
}

function selectRecord(client) {
    emit("select-record", client)
}

function changePageSize(size) {
    countPerPage.value = size
}

function refreshFilter(e) {
    emit("set-filter", props.filter)
}

function cancelFilter() {
    emit("set-filter", {
        method: "",
        status_code: "",
        error_type: ""
    })
}
</script>

<template>
    <panel :label="label" overflow-hidden>
        <template #toolbar>
            <select name="count_per_page" id="" @change="refreshFilter" v-model="filter.method" class="button">
                <option value="">过滤调用方法</option>
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="PATCH">PATCH</option>
                <option value="DELETE">DELETE</option>
                <option value="HEAD">HEAD</option>
                <option value="OPTION">OPTION</option>
                <option value="TRACE">TRACE</option>
            </select>
            <select name="status_code_filter" id="" @change="refreshFilter" style="margin-left: 10px;"
                v-model="filter.status_code" class="button">
                <option value="">过滤状态码</option>
                <option value="200">200</option>
                <option value="400">400</option>
                <option value="404">404</option>
                <option value="2XX">2XX</option>
                <option value="3XX">3XX</option>
                <option value="4XX">4XX</option>
            </select>
            <select name="error_type_filter" id="" @change="refreshFilter" style="margin-left: 10px;"
                v-model="filter.error_type" class="button">
                <option value="">过滤错误类型</option>
                <option :value="level" v-for="des,level in labelDeses">{{ des }}</option>
            </select>
            <button variant="primary" style="margin-left: 10px;" :disabled="filterEmpty"
                @click="cancelFilter">取消</button>
        </template>
        <record-table :records="shownDetail" :total="records.length" :current-page="currentPage"
            @change-page-size="changePageSize" :count-per-page="countPerPage" @goto="goto" @select-client="selectClient"
            @select-record="selectRecord">
        </record-table>
    </panel>
</template>
